<template>

     <!-- 需要设置visible属性，它接收Boolean，当为true时显示 Dialog -->
     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->
    <el-dialog
      title="添加轮播图"
      :visible.sync="dialogVisible"
      width="50%">

      <!-- action上传地址  本地服务器地址-->
      <!-- https://jsonplaceholder.typicode.com/posts/ -->
      <!-- 可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为 -->
      <div class="line_image">
        <div class="line_image_lable">
             <div class="image_label">产品图</div>
        </div>

        <el-upload
          class="upload-demo"
          :action="imageHost+'fileManager/upLoadFile'"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :on-success="handleSuccess">

          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>


      <div class="line_image_margin">
          <div class="line_image_lable">
               <div class="image_label">背景图</div>
          </div>

          <el-upload
            class="upload-demo"
            :action="imageHost+'fileManager/upLoadFile'"
            :on-preview="handlePreview"
            :on-remove="handleRemoveBackground"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccessBackground">

            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </div>

      <!-- :model 将数据form赋值给表单内组件 -->
      <!-- :rules 指定使用的检验规则  -->
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px" style="margin-top: 30px;">
        <el-form-item label="模块名称" prop="sectionName">
          <el-input v-model="form.sectionName"></el-input>
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="标题英文" prop="titleEn">
          <el-input v-model="form.titleEn"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>

        <el-form-item label="描述英文" prop="descriptionEn">
          <el-input type="textarea" v-model="form.descriptionEn"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>

    </el-dialog>


</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { addAboutUsBanner } from '@/api/system/about_us_banner'; // 引入特定的方法
      import { imageHost } from '@/api/ImageHost';

      export default{

        data(){
          return{
            imageHost:'',
            dialogVisible:false,
            fileList : [],
            imageUrl:undefined,
            // 表单数据
            form: {
                  title: '',
                  titleEn: '',
                  description: '',
                  descriptionEn: '',
                  productUrl:'',
                  bgUrl:'',
                  sectionName:''
            },
            rules:{
               sectionName:[{ required: true, message: '请输入模块名称', trigger: 'blur' }],
               title:[{ required: true, message: '请输入标题', trigger: 'blur' }],
               titleEn:[{ required: true, message: '请输入标题英文', trigger: 'blur' }],
               description:[{ required: true, message: '请输入描述', trigger: 'blur' }],
               descriptionEn:[{ required: true, message: '请输入描述英文', trigger: 'blur' }]
            }

          }
        },
        created(){
           this.imageHost=imageHost();

        },
        methods:{
          showDialog(){
            this.dialogVisible=true;
          },

          handleRemove(file, fileList) {
            console.log(file, fileList);
            this.form.imageUrl='';
          },
          handlePreview(file) {
            console.log(file);

          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
           // 当文件上传成功时触发
          handleSuccess(response, file, fileList) {
                console.log('服务器响应:', response);
                // 包含当前上传源文件的所有内容
                // console.log('上传的文件:', file);
                // 包含源文件列表的所有内容
                // console.log('当前文件列表:', fileList);

                // 在这里可以对响应数据进行处理
                // 比如将服务器返回的数据保存到 Vuex 或者本地状态中
                // 将图片地址放入表单
                this.form.productUrl=response.data;

          },
          handleRemoveBackground(file,fileList){
              console.log(file, fileList);
              this.form.bgUrl='';
          },
          handleSuccessBackground(response, file, fileList){
                // 将图片地址放入表单
                this.form.bgUrl=response.data;
          },

          // formName form表单的引用 ref
          submitForm(formName){
              this.$refs[formName].validate((valid) => {
                    if (valid) {
                      //表单数据格式有效
                      // alert('submit!');
                      this.addForm();

                    } else {
                      //格式错误
                      // alert('error submit!!');
                      return false;
                    }
              });

          },
          addForm(){
               addAboutUsBanner(this.form).then(response => {
                 console.log(response);
                 this.dialogVisible=false;
                 // 给父组件发送事件
                 this.$emit('custom-event');

               });

          }

        }


      }
</script>

<style scoped>
  .line_image{
      display: flex;
      flex-direction: row;

  }
  .line_image_margin{
      display: flex;
      flex-direction: row;
      margin-top: 30px;
  }
  .line_image_lable{
      width: 70px;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: end;
      align-items: center;
  }
  .upload-demo{
      margin-left: 15px;

  }
  .image_label{
      color: #666666;
  }

</style>
